<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>我的建站学习笔记</title>
    <link rel="stylesheet" href="../static/jq-1.css">
      <link rel="styleSheet" href="../static/index.css" >
      <style>
          .box{
              float: right;
          }
          #boxs{
            width: 100%;
          }
          #box1{
              margin-left: 36%;
          }
      </style>
  </head>
  <body>

    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">我的建站学习笔记</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
           <li><a href="javascript:void(0);" target="_blank">Login</a></li>
<!--            <li><a href="#">CSDN学院</a></li>-->
<!--            <li><a href="#">help</a></li>-->
          </ul>
        </div>
      </div>
    </nav>


    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#" style="color: #0f0f0f;font-size: 18px;background-color:grey">菜单栏</a></li>
            <li><a href="#">数据中心</a></li>
            <li><a href="#">你的私人小秘密</a></li>
            <li><a href="#">等你来开发</a></li>
          </ul>

        </div>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">

            {% block content %}
            <form class="navbar-form" role="search">
             <div class="form-group">
                <input type="text" class="form-control" placeholder="Search" name="key">
             </div>
            <button type="submit" class="btn btn-info">搜索</button>
        </form>
            <div class="box">
              <button type="submit" class="btn btn-success add">添加</button>
            </div>

          <h3 class="sub-header">我是后台管理页面</h3>
          <div class="table-responsive">
            <table class="table table-striped">
              <thead>
                <tr>
                  <th>编号</th>
                  <th>代号</th>
                  <th>码龄</th>
                  <th>熟悉语言</th>
                  <th>主攻方向</th>
                    <th>薪资</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody class="datas">
              {% for d in data %}
                 <tr>
                  <td>{{ d.id }}</td>
                  <td>{{ d.name }}</td>
                  <td>{{ d.codecoll }}</td>
                  <td>{{ d.echnology }}</td>
                  <td>{{ d.direction }}</td>
                  <td>{{ d.price }}</td>
                <td><button type="button" class="btn btn-danger btn-sm del" data-id="{{ d.id }}">删除</button>
                    <button type="button" class="btn btn-warning btn-sm edit" data-id="{{ d.id }}">编辑</button></td>
                </tr>
            {% endfor %}



              </tbody>
            </table>

          </div>


            <div id="boxs">

     <ul class="pagination" id="box1">
         <!-- 上 -->

          {% if pagination.has_prev %}
    <li><a href="{{ request.path }}?page={{ pagination.prev_num }}">上一页</a></li>
        {% else %}
             <li class="disabled"><a href="#">上一页</a></li>
         {% endif %}


                <!-- 中 -->
             <!--1 ...3 4 5 6 7... 9  None-->
          {% for page in pagination.iter_pages(left_edge=1, left_current=2,right_current=2,right_edge=1)  %}
            {% if page %}
    <li class="{% if page==pagination.page %}active{% endif %}"><a href="{{ request.path }}?page={{ page }}">{{ page }}</a></li>
            {% else %}
            <li class="disabled"><a href="#">...</a></li>
         {% endif %}
          {% endfor %}

           <!-- 下 -->
         {% if pagination.has_next %}
    <li><a href="{{ request.path }}?page={{ pagination.next_num }}">下一页</a></li>
          {% else %}
         <li class="disabled"><a href="#">下一页</a></li>
         {% endif %}

</ul>
            </div>

        </div>
      </div>
        {% endblock %}

    </div>
    <div class="footer">
<span>我的建站学习笔记 <a target="_blank" href="https://beian.miit.gov.cn/#/Integrated/recordQuery">豫ICP备2022004961号</a> </span>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
   <script src="../static/jquery.min.js"></script>
    <script src="../static/bootstrap.min.js"></script>

    <script>
        var $lis = $('.nav-sidebar li');
        $lis.click(function () {
            $(this).addClass('active').siblings('li').removeClass('active');
        });

    </script>

    <script>
        $('.add').click(function() {
            console.log('aaa');
            window.location.href = '/add'
        });

        $('.edit').click(function() {
            window.location.href = '/edit/' + $(this).data('id')
        })

         $('.del').click(function() {
            window.location.href = '/del/' + $(this).data('id')
        })


    </script>

  </body>
</html>
